<!DOCTYPE html>
<html>

<head>
  <title>Document</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="/lib/css/bootstrap.min.css" rel="stylesheet" />
  <script src="/lib/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="/lib/css/fontawesome-free-6.5.1-web/css/all.css" />
  <style>
    body {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }

    html {
      height: -webkit-fill-available;
    }

    main {
      display: flex;
      flex-wrap: nowrap;
      height: 200vh;
      height: -webkit-fill-available;
      max-height: 200vh;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
    }

    .navigation-bar.fixed-top {
      position: fixed;
      top: 0;
      left: 280px;
      /* width: 76rem; */
    }

    #side-bar {
      position: fixed;
      top: 0;
    }

    .b-example-divider {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.1);
      border: solid rgba(0, 0, 0, 0.15);
      border-width: 1px 0;
      box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
    }

    .bi {
      vertical-align: -0.125em;
      pointer-events: none;
      fill: currentColor;
    }

    .dropdown-toggle {
      outline: 0;
    }

    .nav-flush .nav-link {
      border-radius: 0;
    }

    .btn-toggle {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.65);
      background-color: transparent;
      border: 0;
    }

    .btn-toggle:hover,
    .btn-toggle:focus {
      color: rgba(0, 0, 0, 0.85);
      background-color: #d2f4ea;
    }

    .btn-toggle::before {
      width: 1.25em;
      line-height: 0;
      content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
      transition: transform 0.35s ease;
      transform-origin: 0.5em 50%;
    }

    .btn-toggle[aria-expanded='true'] {
      color: rgba(0, 0, 0, 0.85);
    }

    .btn-toggle[aria-expanded='true']::before {
      transform: rotate(90deg);
    }

    .btn-toggle-nav a {
      display: inline-flex;
      padding: 0.1875rem 0.5rem;
      margin-top: 0.125rem;
      margin-left: 1.25rem;
      text-decoration: none;
    }

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
      background-color: #d2f4ea;
    }

    .scrollarea {
      overflow-y: auto;
    }

    .fw-semibold {
      font-weight: 600;
    }

    .lh-tight {
      line-height: 1.25;
    }

    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    @media (max-width: 1000px) {
      .hidden-md {
        display: none;
      }

      .navigation-bar.fixed-top {
        left: 0;
        /* width: 30rem; */
      }
    }

    .h45 {
      height: 45px;
    }

    .img-fluid {
      height: 60px;
    }


    /* 菜单栏 */
    body {
      min-height: 100vh;
      min-height: -webkit-fill-available;
    }

    html {
      height: -webkit-fill-available;
    }

    main {
      display: flex;
      flex-wrap: nowrap;
      height: 200vh;
      height: -webkit-fill-available;
      max-height: 200vh;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
    }

    .navigation-bar.fixed-top {
      position: fixed;
      top: 0;
      left: 280px;
      /* width: 76rem; */
    }

    #side-bar {
      position: fixed;
      top: 0;
    }

    .chart-body {
      margin-left: 275px;
      margin-top: 75px;
    }

    .b-example-divider {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.1);
      border: solid rgba(0, 0, 0, 0.15);
      border-width: 1px 0;
      box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
    }

    .bi {
      vertical-align: -0.125em;
      pointer-events: none;
      fill: currentColor;
    }

    .dropdown-toggle {
      outline: 0;
    }

    .nav-flush .nav-link {
      border-radius: 0;
    }

    .btn-toggle {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.65);
      background-color: transparent;
      border: 0;
    }

    .btn-toggle:hover,
    .btn-toggle:focus {
      color: rgba(0, 0, 0, 0.85);
      background-color: #d2f4ea;
    }

    /* .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform 0.35s ease;
        transform-origin: 0.5em 50%;
      } */
    .btn-toggle[aria-expanded='true'] {
      color: rgba(0, 0, 0, 0.85);
    }

    /* .btn-toggle[aria-expanded='true']::before {
        transform: rotate(90deg);
      } */
    .btn-toggle-nav a {
      display: inline-flex;
      padding: 0.1875rem 0.5rem;
      margin-top: 0.125rem;
      margin-left: 1.25rem;
      text-decoration: none;
    }

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
      background-color: #d2f4ea;
    }

    .scrollarea {
      overflow-y: auto;
    }

    .fw-semibold {
      font-weight: 600;
    }

    .lh-tight {
      line-height: 1.25;
    }

    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    @media (max-width: 1000px) {
      .hidden-md {
        display: none;
      }

      .navigation-bar.fixed-top {
        left: 0;
        /* width: 30rem; */
      }

      .chart-body {
        margin-left: 0;
      }
    }
  </style>
</head>

<body>

  <main>
    <div class="navigation-bar fixed-top">
      <!--  顶部栏 -->
      <nav class="navbar navbar-expand-md bg-primary">
        <div class="container-fluid">
          <div class="collapse navbar-collapse h45" id="select">
            <div class="navbar-collapse"></div>
            <div class="justify-content-end">
              <div class="navbar-nav me-lg-2">
                <div class="nav-item text-nowrap d-flex align-items-center justify-content-end">
                  <div></div>
                  <!-- 头像 -->
                  <div class="dropdown px-3">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                      aria-expanded="false">
                      <img src="../images/shang1.jpg" class="profile-image img-fluid" alt="">
                    </a>
                    <ul class="dropdown-menu bg-white shadow">
                      <li>
                        <div class="dropdown-menu-profile-thumb d-flex">
                          <img src="" class="profile-image img-fluid me-3" alt="">

                          <div class="d-flex flex-column">
                            <small>Thomas</small>
                            <a href="#">thomas@site.com</a>
                          </div>
                        </div>
                      </li>

                      <li>
                        <a class="dropdown-item" href="profile.html">
                          <i class="bi-person me-2"></i>
                          Profile
                        </a>
                      </li>

                      <li>
                        <a class="dropdown-item" href="setting.html">
                          <i class="bi-gear me-2"></i>
                          Settings
                        </a>
                      </li>

                      <li>
                        <a class="dropdown-item" href="help-center.html">
                          <i class="bi-question-circle me-2"></i>
                          Help
                        </a>
                      </li>

                      <li class="border-top mt-3 pt-2 mx-4">
                        <a class="dropdown-item ms-0 me-0" href="#">
                          <i class="bi-box-arrow-left me-2"></i>
                          Logout
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
    <!-- 侧边栏 -->
    <div class="flex-shrink-0 p-3 bg-white hidden-md" style="width: 280px; height: 100%" id="side-bar">
      <a href="#" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
        <svg class="bi me-2" width="30" height="24">
          <use xlink:href="#bootstrap" />
        </svg>
        <span class="fs-5 fw-semibold">网吧管理系统</span>
      </a>
      <ul class="list-unstyled ps-0">
        <li class="mb-1">
          <a href="/headPage/inter.html" class="text-decoration-none text-black-50"
            style="display: flex; align-items: center" target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-solid fa-house-chimney-window" style="font-size: 20px"></i>
            </div>
            <span>首页</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/shopManage/shopping.html" class="text-decoration-none text-black-50" style="display: flex; align-items: center"
            target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-solid fa-tag" style="font-size: 20px"></i>
            </div>
            <span>商城</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/orderManage/dingdan.html" class="text-decoration-none text-black-50"
            style="display: flex; align-items: center" target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-solid fa-house-chimney-window" style="font-size: 20px"></i>
            </div>
            <span>设备管理</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/orderManage/dingdan.html" class="text-decoration-none a-center text-black-50" style="display: flex; align-items: center"
            target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-solid fa-basket-shopping" style="font-size: 20px"></i>
            </div>
            <span>商品管理</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/orderManage/dingdan.html" class="text-decoration-none a-center text-black-50" style="display: flex; align-items: center"
            target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-regular fa-file-lines" style="font-size: 20px"></i>
            </div>
            <span>订单管理</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/memberManage/vip.html" class="text-decoration-none a-center text-black-50" style="display: flex; align-items: center"
            target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-regular fa-gem" style="font-size: 20px"></i>
            </div>
            <span>会员管理</span>
          </a>
        </li>
        <li class="mb-1">
          <a href="/userCenterManage/center.html" class="text-decoration-none a-center text-black-50"
            style="display: flex; align-items: center" target="home-center">
            <div class="mx-3 d-flex align-items-center justify-content-center rounded-2"
              style="width: 2rem; height: 2rem">
              <i class="fa-solid fa-image-portrait" style="font-size: 20px"></i>
            </div>
            <span>个人中心</span>
          </a>
        </li>
      </ul>
    </div>

    <div class="b-example-divider"></div>

    <!-- 图表内容 -->
    <!-- <iframe src="缴费信息.html"  frameborder="0" name="change-content"></iframe> -->
    <iframe src="/headPage/inter.html" width="100%" frameborder="0" name="home-center"
      style="margin-left: 275px; margin-top: 75px"></iframe>
  </main>
</body>

</html>